<template>
  <div>
    <el-form-item
      v-if="activeData.config.tag === 'el-select'"
      :label="$t('formgen.select.search')"
    >
      <el-switch v-model="activeData.filterable" />
    </el-form-item>
    <el-form-item
      v-if="activeData.config.tag === 'el-select'"
      :label="$t('formgen.select.multiChoose')"
    >
      <el-switch
        v-model="activeData.multiple"
        @change="multipleChange"
      />
    </el-form-item>
    <config-item-option :active-data="activeData" />
    <el-form-item :label="$t('formgen.checkBox.numberSetting')">
      <div
        class="cp"
        @click="$refs.optionQuotaDialog.openQuotaSetting()"
      >
        <el-button
          type="primary"
          v-if="isQuotaSetting"
        >
          {{ $t("formgen.checkBox.isSetting") }}
        </el-button>
        <el-button v-else>{{ $t("formgen.checkBox.notSetting") }}</el-button>
      </div>
    </el-form-item>
    <option-quota
      :active-data="activeData"
      ref="optionQuotaDialog"
    />
  </div>
</template>

<script setup name="ConfigItemSelect">
import ConfigItemOption from "./option.vue";
import OptionQuota from "@/views/formgen/components/FormDesign/ItemConfig/optionQuota.vue";
import { computed } from "vue";

const props = defineProps({
  activeData: Object
});

const multipleChange = val => {
  props.activeData.config["defaultValue"] = val ? [] : "";
};

const isQuotaSetting = computed(() => {
  const arr = props.activeData.config.options.filter(e => {
    return typeof e.quotaSetting === "number";
  });
  return arr.length;
});
</script>
